<template>
    <!-- 邀请 -->
    <div class="invite">
        <homeHeader />
        <div class="invite-box">
            <p class="font-52 font-700 text-center mb-40">输入我的邀请码最高领取金额</p>
            <p class="font-52 font-700 text-center">18USDT</p>
            <figure class="text-center mb-110"><img class="box-img" src="@/assets/image/invite/1964.png"></figure>
            <div v-for="(value,key) in caseList" :key="key" class="flex justify-between items-center mb-28">
                <div class="box-case">
                    <p class="case-title">{{ key }}</p>
                    <p class="case-value font-Omit">{{ value }}</p>
                </div>
                <figure @click="copy(value)"><img class="case-img" src="@/assets/image/invite/copy.png"></figure>
            </div>
            <homeButton :name="'邀请好友'" class="box-button" @clickBtn="()=>isShow = true"/>
            <div class="box-process">
                <p class="text-center font-36 mb-78">邀请过程</p>
                <div v-for="item in processList" :key="item.id" class="mb-50">
                    <p class="font-36 mb-12 pl-40 process-title" :data-count="item.id">{{ item.title }}</p>
                    <p class="font-28 pl-40" style="color: #909090;">{{ item.text }}</p>
                </div>
            </div>
            <div class="box-task">
                <p class="font-34">与未在gols注册的朋友分享邀请券代码/链接</p>
                <p class="font-34">规则任务：</p>
                <p class="font-34 mb-80">被推荐人在注册14日存款累计超过50USDT，双方职工可获得100USDT的交易手续费返还券。免责声明：每个推荐人只能获得一次悬赏。例如，如果朋友使用您的邀请链接（高级邀请）模式）ID/链接注册，您将无法获得标准推荐奖励。</p>
                <div class="task-level">
                    <div class="text-center">
                        <img src="@/assets/image/invite/Level1.png">
                        <p>一级好友</p>
                        <p>0</p>
                    </div>
                    <div class="text-center">
                        <img src="@/assets/image/invite/Level2.png">
                        <p>二级好友</p>
                        <p>0</p>
                    </div>
                    <div class="text-center">
                        <img src="@/assets/image/invite/Level3.png">
                        <p>三级好友</p>
                        <p>0</p>
                    </div>
                    <div class="text-center">
                        <img src="@/assets/image/invite/all.png">
                        <p>邀请总数</p>
                        <p>0</p>
                    </div>
                </div>
            </div>
            <div class="box-record">
                <p class="text-center font-36 mb-80">我的奖励记录</p>
                <nav class="record-nav">
                    <button v-for="item in navList" :key="item.id" :class="['nav-button',navId === item.id ? 'active':'']" @click="clickNav(item)">{{ item.title }}</button>
                </nav>
                <div class="record-content">
                    <ul class="content-header">
                        <li class="header-title" v-for="item in navTitle" :key="item.id">{{ item.title }}</li>
                    </ul>
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                        <ul class="content-detail" v-for="item in list" :key="item" :title="item">
                            <li class="detail-text" v-for="(value,key) in item" :key="key">{{ value }}</li>
                        </ul>
                    </van-list>
                </div>
            </div>
        </div>
        <share :isShow="isShow" @popChange="(val)=>isShow = val" :caseList="caseList"/>
    </div>
</template>

<script>
import homeHeader from '@/components/home/header.vue';
import homeButton from '@/components/home/components/homeButton.vue';
import { List } from 'vant';
import share from './share.vue';
import Axiospromote from "@/API/promote";
import {BASE_URL} from "@/config";
export default {
    components:{
        homeHeader,
        homeButton,
        [List.name]: List,
        share,
    },
    data() {
        return {
            isShow:false,
            caseList:{
                '邀请码':'',
                '邀请链接':'',
            },
            processList:[
                {
                    id:1,
                    title:'好友邀请',
                    text:'与朋友分享推荐链接邀请朋友',
                },
                {
                    id:2,
                    title:'账户注册和首次存款',
                    text:'下级好友可以使用邀请码注册并充值',
                },
                {
                    id:3,
                    title:'赚取奖励',
                    text:'每个人都将获得环球的奖励',
                },
            ],
            navList:[
                {
                    id:0,
                    title:'第一级奖励',
                },
                {
                    id:1,
                    title:'第二级奖励',
                },
                {
                    id:2,
                    title:'第三级奖励',
                },
            ],
            navTitle:[
                {
                    id:0,
                    title:'名字'
                },
                {
                    id:1,
                    title:'时间'
                },
                {
                    id:2,
                    title:'奖励'
                },
            ],
            navId:0,
            loading: false,
            finished: false,
            list:[]

        }
    },
    mounted(){
        this.getCode();
    },
    methods: {
        clickNav(data){
            this.navId = data.id;
        },
        onLoad() {
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push({
                        name:'张三',
                        time:`2024-10-${this.list.length}`,
                        award:this.list.length * 2,
                    });
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= 20) {
                    this.finished = true;
                }
            }, 1000);
        },
        // 复制
        copy(val){
            this.$copyText(val).then(message => {
                this.$toast(this.$t('复制成功'));
            }).catch(err => {

            })
        },
        getCode(){
            Axiospromote.localuser({}).then((res)=>{
                if(res.code == 0){
                    const shareUrl = BASE_URL + '?usercode=' + res.data.usercode;
                    this.caseList['邀请码'] = res.data.usercode;
                    this.caseList['邀请链接'] = shareUrl;
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.invite{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px 108px;
    background-color: #000;
    overflow: hidden;
    color: #fff;
    .invite-box{
        padding-top: 70px;
        .box-img{
            width: 422px;
            height: 420px;
        }
        .box-case{
            flex: 1;
            height: 90px;
            border: 1px solid #999B99;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 50px;
            padding: 28px;
            box-sizing: border-box;
            margin-right: 50px;
            border-radius: 10px;
            .case-title{
                font-size: 26px;
                color: #8C8C8C;
            }
            .case-value{
                max-width: 422px;
                text-align: right;
            }
        }
        .case-img{
            width: 40px;
            height: 40px;
        }
        .box-button{
            margin-top: 72px;
            margin-bottom: 104px;
            ::v-deep .home-button{
                height: 82px;
                border-radius: 8px;
            }
        }
        .box-process{
            margin-bottom: 200px;
            .process-title{
                position: relative;
                left: 0;
                top: 0;
                &::before{
                    content: attr(data-count);
                    display: block;
                    font-size: 36px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        .box-task{
            line-height: 48px;
            margin-bottom: 82px;
            .task-level{
                display: grid;
                grid-template-columns: repeat(2,1fr);
                row-gap: 88px;
                column-gap: 40px;
                font-size: 26px;
                img{
                    width: 180px;
                    height: 180px;
                }
            }
        }
        .box-record{
            .record-nav{
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 20px;
                margin-bottom: 66px;
                .nav-button{
                    border: none;
                    background-color: transparent;
                    color: #999B99;
                    font-size: 30px;
                    &:nth-of-type(1){
                        text-align: left;
                    }
                    &:nth-of-type(2){
                        text-align: center;
                    }
                    &:nth-of-type(3){
                        text-align: right;
                    }
                }
                .active{
                    color: #fff;
                }
            }
            .record-content{
                .content-header,.content-detail{
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 20px;
                    .header-title,.detail-text{
                        &:nth-of-type(1){
                            text-align: left;
                        }
                        &:nth-of-type(2){
                            text-align: center;
                        }
                        &:nth-of-type(3){
                            text-align: right;
                        }
                    }
                }
                .content-header{
                    border-bottom: 1px solid #F6F6F6;
                    padding-bottom: 10px;
                }
                .content-detail{
                    padding: 10px 0;
                }
            }
        }
    }
}
</style>